<template>
    <BPTable ref='tableRef' align='center' row-key='id' name-key='name' :columns='columns' :api='upgradePageApi'>
        <template #$action="{record}">
            <BTextButton @click="openDevices(record.id)">查看</BTextButton>
        </template>
    </BPTable>

    <a-drawer width="500px" v-model:open="open" destroyOnClose>
        <Devices :task="currentTaskId" />
    </a-drawer>
</template>

<script lang='ts' setup>
    import { ref } from "vue";
    import { upgradePageApi } from "@/api/Ota";
    import { parseTime } from "@/utils";
    import { useI18nStore } from "@/store/i18n";
    import Devices from './Devices.vue'

    const i18n = useI18nStore()

    const tableRef = ref()

    const currentTaskId = ref(0)
    const open = ref(false)
    function openDevices(id) {
        currentTaskId.value = id
        open.value = true
    }


    const columns = ref<Column[]>([
        {
            dataIndex : 'firmwareName',
            title : '固件',
        },

        {
            dataIndex : 'total',
            title : '总数',
        },

        {
            dataIndex : 'successCount',
            title : '成功',
        },

        {
            dataIndex : 'failCount',
            title : '失败',
        },


        {
            title : '时间',
            dataIndex : 'createTime',
            align : 'center',
            customRender({text}) {
                return parseTime(text)
            }
        },

        
        {
            dataIndex : '$action',
            title : i18n.t('operation'),
            align : 'center',
        },
    ])





</script>